import { computed, defineComponent, onErrorCaptured, reactive, ref } from 'vue';
import { RouterView, RouteRecordRaw, RouteLocationRaw } from 'vue-router';
import { Menu, MenuItem, SubMenu, SubMenuProps, MenuItemProps, Button } from 'ant-design-vue';
import ErrorPage from '@/components/home/error';
import Header from '../header';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  createFromIconfontCN,
  BankTwoTone,
  DatabaseOutlined,
  AppstoreOutlined,
  BlockOutlined,
  DropboxOutlined,
  UserOutlined,
  IdcardOutlined,
  MonitorOutlined,
  CrownOutlined,
  ContainerOutlined
} from '@ant-design/icons-vue';
import { RouterType, router } from '../../router/index';
import { getParentRouterName, menuData, menuRouter } from '../../router/menuInfo';
import { nextTick } from 'process';
import { MenuRouterType } from '@/domain/authority/types/menu';
import ziti from '@/project/dataBoard/assets/images/logo_black.png';
export type ClickMenuParam = { item: MenuItemProps; key: string; keyPath: string };

const MenuPage = defineComponent({
  props: {},
  setup(props) {
    /**异常处理 */
    const errorHappened = ref<boolean>(false);
    const errorMessage = ref<string>('');

    //数据驱动menuinfo
    const menuInfo = computed(() => menuData);
    const barInfo = computed(() => getParentRouterName(menuData));
    const currentRouterInfo = computed(() => menuRouter.filter((node) => node.name === router.currentRoute.value.name));

    const barTitle = computed(() =>
      currentRouterInfo.value.length > 0
        ? barInfo.value.pChName !== ''
          ? barInfo.value.pChName + '-' + currentRouterInfo.value[0].chname
          : currentRouterInfo.value[0].chname
        : ''
    );

    const state = reactive({
      openKeys: [barInfo.value.pName],
      collapsed: false,
      selectedKeys: [router.currentRoute.value.name]
    });
    const click = (path: string) => {
      errorHappened.value = false;
      errorMessage.value = '';
      router.push({ path, replace: false });
    };
    const toggleCollapsed = () => {
      state.collapsed = !state.collapsed;
    };
    const select = ({ item, key, selectedKeys }: any) => {
      state.selectedKeys = selectedKeys;
    };

    const open = ({ item, key, selectedKeys }: any) => {
      state.openKeys = selectedKeys;
    };

    const getMenuItem = (nodelist: RouterType[]) => {
      return (
        <>
          {' '}
          {nodelist.map((val) => {
            if (!val.children || val.children.length === 0) {
              return (
                <MenuItem
                  key={val.name as string}
                  onClick={() => {
                    click(`${val.path}`);
                  }}
                  icon={<BlockOutlined />}
                >
                  <span>{val.chname}</span>
                </MenuItem>
              );
            } else {
              return (
                <SubMenu key={val.name as string} title={val.chname} icon={<AppstoreOutlined />}>
                  {' '}
                  {getMenuItem(val.children)}
                </SubMenu>
              );
            }
          })}{' '}
        </>
      );
    };

    function renderErrorPage() {
      return <ErrorPage message={errorMessage.value} />;
    }
    return () => (
      <div class=" w-full h-full" style={{ display: 'flex' }}>
        <div class={(state.collapsed ? 'w-auto' : 'w-60') + ' max-w-60 bg-gray-50 overflow-hidden'} style={{ minHeight: '100vh' }}>
          <div style="display: flex; justify-content: center; align-items: center; margin: 20px">
            {!state.collapsed ? (
              <img class="inline-block align-top w-2/3 h-2/3" alt="" src={ziti}></img>
            ) : (
              <DropboxOutlined style={{ fontSize: '32px', color: '#08c' }}></DropboxOutlined>
            )}
          </div>
          <Menu
            theme="light"
            mode="inline"
            onOpenChange={open}
            onSelect={select}
            openKeys={state.openKeys}
            selectedKeys={state.selectedKeys}
            inline-collapsed={state.collapsed}
          >
            {menuInfo.value ? getMenuItem(menuInfo.value) : null}
            {/* {getMenuItem(chirdRoutes)} */}
          </Menu>
        </div>
        <div style={{ flex: '1' }}>
          <Header
            v-slots={{
              default: () => (
                <Button class={'inline-block '} type="link" onClick={toggleCollapsed}>
                  {state.collapsed ? (
                    <MenuFoldOutlined style={{ fontSize: '22px' }}></MenuFoldOutlined>
                  ) : (
                    <MenuUnfoldOutlined style={{ fontSize: '22px' }}></MenuUnfoldOutlined>
                  )}
                </Button>
              )
            }}
          ></Header>
          <div class="relative  h-auto p-5" style={{ height: 'calc(100vh - 80px)', overflowY: 'auto' }}>
            <div class={' mb-3 mt-3 text-xs2 font-bold'}>{barTitle.value}</div>
            <>{errorHappened.value ? renderErrorPage() : <RouterView></RouterView>}</>
          </div>
        </div>
      </div>
    );
  }
});

MenuPage.displayName = 'MenuPage';

export default MenuPage;
